<template>
  <div class="container">
    <van-nav-bar title="材料请购" left-text="返回" right-text left-arrow @click-left="onClickLeft" fixed/>
    <div class="content">
      <div class="nav">
        <ul>
          <li v-for="(item,index) in navList" :key="index" @click="getProductList(item)" :class="{selectBd:item.isSelect}">{{item.type_name}}</li>
        </ul>
      </div>
      <div class="list">
        <ul>
          <li @click="toChooseSpe(item.id)" v-for="(item,index) in productList" :key="index">
            <div class="card">
              <img :src="item.img_src||pic" alt>
              <p>{{item.material_name}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <div class="store" @click="search">
          <img src="../assets/images/ic_search.png" alt>
          <span>搜索</span>
        </div>
        <div class="collect" @click="record">
          <img src="../assets/images/ic_mine_n.png" alt>
          <span>记录</span>
        </div>
      </div>
      <div class="buy" @click="confirm">请购确认</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      navList: [],
      productList:[],
      pic:require('../assets/images/moren.png'),
    };
  },
  mounted() {
    this.getNavList();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    confirm() {
      this.$router.push("/materialConfirm");
    },
    search() {
      this.$router.push("/search");
    },
    record() {
      this.$router.push("/orderRecord");
    },
    toChooseSpe(id) {
      this.$router.push({ path: "/chooseSpe", query: {
        id:id
      } });
    },
    async getNavList() {
      let params = {};
      const res = await this.$axios.post(this.$api.add_detail, params);
      if (res.code == 1) {
        this.navList = res.data;
        this.navList.isSelect=false;
          this.getProductList(this.navList[0]);
      } else {
        this.$toast(res.msg);
      }
    },
    async getProductList(item){
       let params = {
         type_id:item.id
       };
      const res = await this.$axios.post(this.$api.hlIndex, params);
      if (res.code == 1) {
        this.productList = res.data;
        this.navList.forEach((i,eq)=>{
          i.isSelect=false;
        });
        item.isSelect=true;
      } else {
        this.$toast(res.msg);
      }
    }

  }
};
</script>
<style scoped>
.selectBd{
  background:#fff;
}
.container {
  padding-top: 0.46rem;
  position: fixed;
  top: 0;
  background: #fff;
  width: 100%;
  height: 100%;
}
.footer {
  width: 100%;
  height: 0.6rem;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
}
.footer .buy {
  width: 50%;
  height: 100%;
  background: #56e519;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer img {
  width: 0.18rem;
}
.footer .left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50%;
}
.footer .left > div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  color: #656565;
  font-size: 0.12rem;
}
.footer .left > div span {
  margin-top: 0.05rem;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.nav {
  width: 30%;
  background: #eeeeee;
  height: calc(100vh - 1.06rem);
  overflow: auto;
}
.nav ul {
  overflow: auto;
}
.nav li {
  text-align: center;
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  color: #666666;
}
.list {
  width: 70%;
  height: calc(100vh - 1.06rem);
  overflow: auto;
}
.list ul {
  width: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
.list ul li {
  width: 50%;
  padding: 0.08rem;
}
.list ul li .card {
  background: #eeeeee;
  border-radius: 0.05rem;
  font-size: 0.12rem;
}
.list ul li .card img {
  width: 100%;
}
.list ul li .card p {
  padding: 0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


